<template>
  <div id="background">
    <el-container>
      <el-header style="height:200px">
        <div style="position:relative">
           <el-image
              style="width:100%;height:200px"
              :src="titleBack"
              fit="cover">
            </el-image>
            <div style="position:absolute;left:0;top:0px;right:0;bottom:0;margin:auto;height:40px;width:152px" >
              
              <img v-bind:src="titleWord" style="height:40px"/>
            </div>
        </div>
      </el-header>
      <el-main >
        <div id="inputHeight">
          <el-row  type="flex" style="margin-bottom:15px">
                  <!--col-lg>1200px;col-md>992px;col-sm>768;col-xs<768-->
                  <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol" ><img v-bind:src="phoneIcon" style="height:25px"/></el-col>
                  <el-col :xs="17" :sm="17" :md="17">
                      <el-input class="loginInput" id="loginInput1" v-model="loginForm.username" placeholder="请输入手机号" clearable></el-input>
                  </el-col>
              </el-row>
              <el-row type="flex" style="margin-bottom:15px">
                  <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol"><img v-bind:src="codeIcon" style="height:20px"/></el-col>
                  <el-col :xs="17" :sm="17" :md="17">
                      <el-input class="loginInput" id="loginInput2" v-model="loginForm.password" placeholder="请输入密码" clearable show-password></el-input>
                  </el-col>
              </el-row>
              <el-row type="flex" >
                  <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol">
                      <el-checkbox v-model="xieYiChoose"></el-checkbox>
                  </el-col>
                  <el-col class="words" style="font-size:13px" :xs="17" :sm="17" :md="17"><p>我已同意<a  style="color:#53cdf5" @click="goToXieYi">《新职通服务协议》</a></p></el-col>
              </el-row>
          </div>
          <div>
             <el-row type="flex" justify="center" style="margin-bottom:10px">
                <el-col :xs="20" :sm="20" :md="20" >
                    <button v-show="xieYiChoose" class="btn" @click="login"><p class="btnWords">登 录</p></button>
                    <button v-show="!xieYiChoose" class="btnNotLogin"><p class="btnWords">登 录</p></button>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col :xs="6" :sm="4" :md="4" :offset="2">
                    <p class="words" style="font-size:0.8em" @click="forget">忘记密码？</p>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :offset="12">
                    <p class="words" style="font-size:0.8em" @click="regist">注册</p>
                </el-col>
            </el-row>
          </div>
      </el-main>
      <el-footer id="thirdPosition" style="" :class="whichPosition?'loginFootPosition':''">
            <el-row type="flex" justify="center">
                <img v-bind:src="thirdIcon" style="height:18px;width:100%;margin-bottom:8px"/>
            </el-row>
            <el-row type="flex">
                <el-col :xs="4" :sm="4" :md="4" :offset="7" >
                    <img v-bind:src="qqIcon" style="height:2.5em"/>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :offset="2">
                    <img v-bind:src="wechatIcon" style="height:2.5em"/>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>
  </div>
</template>
<script>
import titleImg from '../../assets/img/login/title.png'
import codeIcon from '../../assets/icon/login/code.png'
import phoneIcon from '../../assets/icon/login/phone.png'
import thirdIcon from '../../assets/img/login/third.png'
import qqIcon from '../../assets/icon/login/qq.png'
import wechatIcon from '../../assets/icon/login/wechat.png'
import titleBack from '../../assets/img/login/titleBack.png'
import titleWord from '../../assets/img/login/titleWord.png'
import { Toast } from 'vant';
export default {
    data(){
        return{
           normalHeight:document.documentElement.clientHeight,
           //绑定静态资源图片
            titleImg:titleImg,
            titleBack:titleBack,
            titleWord:titleWord,
            codeIcon:codeIcon,
            phoneIcon:phoneIcon,
            thirdIcon:thirdIcon,
            qqIcon:qqIcon,
            wechatIcon:wechatIcon,
            //绑定登录信息
            loginForm:{
                username:'',
                password:''
            },
            //绑定协议是否选中
            xieYiChoose:true,
            //实时屏幕高度
            showHeight:document.documentElement.clientHeight,
            height:document.documentElement.clientHeight,
            whichPosition:true,
        }
    },
    watch:{
        showHeight(val){
            //console.log("shoHeight"+this.showHeight);
            this.whichFoot();
        },
    },
    mounted(){




       var normalHeight=sessionStorage.getItem('normalHeight');

        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        // window.onresize监听页面高度的变化
        const that = this;
        window.onresize = () => {
            return (() => {
                window.screenHeight=document.documentElement.clientHeight;
               that.showHeight=window.screenHeight;
            })()
         }
    },
    methods:{
 
        goToXieYi(){
            this.$router.push({
                path:'/mine/fuWuXieYi'
            })
        },
        regist(){
            console.log("regist:");
            this.$router.push({
                path:'/regist/registStep1',
                query:{
                    type:'regist'
                }
            })
        },
        forget(){
            console.log("forget:");
            this.$router.push({
                path:'/regist/registStep1',
                 query:{
                    type:'forget'
                }
            })
        },
        login(){
            console.log(this.loginForm);
        
            var URL=this.IP.IP+'/user/login'
            this.$ajax({
                method:'post',
                url:URL,
                data:this.loginForm
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.$router.push({
                        path:'/peiXun'
                    })
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
               // Toast(error);
            })
            //   this.$router.push({
            //             path:'/peiXun'
            //         });
        },
        //比较实时高度，判断底部样式
        whichFoot(){
            if(this.showHeight<this.height){
                //console.log("foot not fixed");
                this.whichPosition=false;
            }else{
                //console.log("foot fixed");
                this.whichPosition=true;
            }
        }
    }
}
</script>
<style>
.loginFootPosition{
    position: fixed;
    bottom:20px;
    width:100%
}
.el-header,el-main,el-footer,el-aside{
  padding:0px;
  margin: 0px;
}
.imgCol{

    display:flex;
    align-items:center;
    justify-content:center
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color:#53cdf5;
    border-color:#53cdf5;
}
.el-checkbox__inner {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
}
.loginInput .el-input__inner {
    font-size: 1.125em;
    border: none;
    border-bottom: 1px solid;
    border-color: #F0F0F0;
    background-color: rgba(255, 255, 255, 0);
    color: #707070;
    border-radius: 0px;
}
#loginInput1::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-size: 1em;
}
#loginInput1::-moz-placeholder { /* Firefox 19+ */
    font-size: 1em;
}
#loginInput1:-ms-input-placeholder { /* IE 10+ */
    font-size: 1em;
}
#loginInput1:-moz-placeholder { /* Firefox 18- */
    font-size: 1em;
}
#loginInput2::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-size: 1em;
}
#loginInput2::-moz-placeholder { /* Firefox 19+ */
    font-size: 1em;
}
#loginInput2:-ms-input-placeholder { /* IE 10+ */
    font-size: 1em;
}
#loginInput2:-moz-placeholder { /* Firefox 18- */
     font-size: 1em;
}
.words{
    color:#B8B8B8;
}
.btn{
    line-height: 0.75em;
    width: 100%;
    background-color: #53cdf5;
    border-style: none;
    outline: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
}
.btnNotLogin{
    line-height: 0.75em;
    width: 100%;
    background-color: #B8B8B8;
    border-style: none;
    outline: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
}
.btnWords{
    font-size: 1.125em;
    color: #ffffff;
}
#thirdPosition{
    /**
    position: fixed;*/
    bottom: 10px;
}
/* .firstRow{
    margin-bottom: 30px;
} */
#inputHeight{
    height: 200px;
}
@media screen and (max-height: 600px){
  #inputHeight{
      height: 160px;
  }

}
</style>
